<template>
	<view class="content">
		<view class="index_t">
			<view class="index_t_t flex1" v-if="member.token">
				<view class="user flex1" @click="geren()">
					<view class="index_t_t_l">
						<image :src="member.avatar?member.avatar:'../../static/index/tx.png'" class="w88 tx" mode="">
						</image>
					</view>
					<view class="index_t_t_m">
						{{member.nickname}}
					</view>
				</view>
				<view class="ewm flex1" @click="tuiguangma()">
					
					达人邀请二维码
					<image src="../../static/index/ewm.png" class="w88" mode=""></image>
				</view>

			</view>
			<view class="index_t_b">
				<view class="bg1">
					<view class="bg1_t">
						{{num}}
					</view>
					<view class="bg1_b">
						我的达人
					</view>
				</view>
			</view>
		</view>
		<view class="index_b">
			<view class="index_b1">
				<view class="in_box1">
					<view class="box_t">
						订单中心
					</view>
					<view class="box_b ">
						<view class="box_b1 flex1">
							<view class="box" v-for="(item,index) in order" :key="index">
								<view class="box1">
									{{item.name}}
								</view>
								<view class="box2">
									{{item.num}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="in_box1">
					<view class="box_t flex1">
						<view class="box_t_t flex1">
							收益中心
							<view class="money">
								可提现金额: <text class="money_num">{{money}}</text>
							</view>
						</view>
						<view class="box_t_b" @click="tixian()">
							提现
						</view>

					</view>
					<view class="box_b ">
						<view class="box_b1 flex1">
							<view class="box" v-for="(item,index) in income" :key="index">
								<view class="box1">
									{{item.name}}
								</view>
								<view class="box2">
									{{item.num}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="in_box1">
					<view class="box_t">
						我的达人
					</view>
					<view class="box_b ">
						<view class="" v-if="expert.length==0">
							<noneView noneType="暂无记录"></noneView>
						</view>


						<view class="box_b1 " v-else>
							<view class="box5 flex1" v-for="(item,index) in expert" :key="index">
								<view class="box3 flex1" >
									<view class="box3_l">
										<view v-if="item.work_status==1" class=" zaixian flex-row-center">
											<view class=""
												style="width: 16rpx;height: 16rpx;background: #2EF252;border-radius: 50%;margin-right: 8rpx;">
										
											</view>在线
										</view>
										<!-- 	<view v-if="item.work_status==2" class=" zaixian lixian flex-row-center">
											休息中
										</view>
										<view v-if="item.work_status==3" class=" zaixian lixian1  flex-row-center">
											服务中
										</view> -->
										
										<view v-if=" item.work_status==2" class=" zaixian lixian1  flex-row-center">
											<view class=""
												style="width: 16rpx;height: 16rpx;background: #bbb;border-radius: 50%;margin-right: 8rpx;">
										
											</view>
											离线
										</view>
										<view v-if="item.work_status==3" class=" zaixian lixian1  flex-row-center">
											<view class=""
												style="width: 16rpx;height: 16rpx;background: red;border-radius: 50%;margin-right: 8rpx;">
										
											</view>
											忙碌
										</view>
										<image :src="item.avatar" class="w100" mode=""></image>
									</view>
									<view class="box3_r">
										<view class="box3_r_t">
											{{item.nickname}}
										</view>
										<view class="box3_r_b">
											手机号：{{item.phone}}
										</view>
										<view class="box3_r_b">
											抽佣比例: <text class='ratio'>{{item.pid_portion}}% </text>
										</view>
									</view>
								</view>
								<view class="box4" @click="gunli(item.id)">
									管理
								</view>
								<view class="box4" @click="toOrder(item.id)">
									订单
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>


		</view>
		<!-- <view class="gunlipop">
			<l-popup :radius="20" :show="gunlishow" @mask="mask">
				<view class="pop">
					<view class="pop_t" @click="quxiao">
						<image src="../../static/x.png" class="w48" mode=""></image>
					</view>
					<view class="xiugai">
						设置抽佣比例
					</view>
					<view class="shuru">
						<u-input v-model="value" type="number" border="none" maxlength: :placeholder='value' />
					</view>
					<view class="queding" @click="queding">
						确定
					</view>
				</view>
			</l-popup>


		</view> -->
		<uni-popup ref="popup">
			<view class="popup-content">
				<view class="pop">
					<view class="pop_t" @click="$refs.popup.close()">
						<image src="../../static/x.png" class="w48" mode=""></image>
					</view>
					<view class="xiugai">
						设置抽佣比例
					</view>
					<view class="" style="color: red;margin-bottom: 50rpx;">
						此代表抽取达人订单金额的百分比
					</view>
					<view class="shuru">
						<u-input v-model="value" type="number" border="none" maxlength: :placeholder='value' />
					</view>
					<view class="queding" @click="queding">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import noneView from "@/components/none-item/none-item.vue"
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			noneView,


		},

		data() {
			return {
				ratio: "00",
				title: 'Hello',
				num: 1000,
				money: 0,
				gunlishow: false,
				value: '',
				guanliid: 0,
				userinfo: {
					avatar: '../../static/index/tx.png',
					nickname: '天很蓝萨丁格天很蓝萨丁格'
				},
				order: [{
						name: '日订单',
						num: 100
					},
					{
						name: '周订单',
						num: 100
					},
					{
						name: '月订单',
						num: 100
					},
					{
						name: '总订单',
						num: 100
					},
				],
				income: [{
						name: '日收益',
						num: 100
					},
					{
						name: '周收益',
						num: 100
					},
					{
						name: '月收益',
						num: 100
					},
					{
						name: '总收益',
						num: 100
					},
				],
				tid: 0,

				expert: [
					// {
					// 	avatar: '../../static/index/tx.png',
					// 	nickname: '天很蓝',
					// 	ratio: 30
					// },
					// {
					// 	avatar: '../../static/index/tx.png',
					// 	nickname: '天很蓝',
					// 	ratio: 30
					// },
					// {
					// 	avatar: '../../static/index/tx.png',
					// 	nickname: '天很蓝',
					// 	ratio: 30

					// },
					// {
					// 	avatar: '../../static/index/tx.png',
					// 	nickname: '天很蓝',
					// 	ratio: 30
					// },
				],

			}
		},
		computed: {
			...mapState(['member', 'service_status', 'real_status']),
			...mapGetters(['isLogin']),

		},
		// async onShow() {
		// 	this.get_userinfo()
		// },
		async onShow() {
			this.init()

			console.log(this.member, 'this.member');
		},
		onLoad() {
			if (!this.member.token) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			toOrder(e) {
				uni.navigateTo({
					url: '/pages/index/order?id=' + e
				})
				// console.log(e);
			},
			async init() {
				let data = await this.$u.api.index({

				});
				console.log(data, 'data');
				if (data) {
					this.num = data.data.personals
					this.expert = data.data.personal_list
					this.income[0].num = data.data.day_income
					this.income[1].num = data.data.week_income
					this.income[2].num = data.data.month_income
					this.income[3].num = data.data.total_income
					this.order[0].num = data.data.day_orders
					this.order[1].num = data.data.week_orders
					this.order[2].num = data.data.month_orders
					this.order[3].num = data.data.total_orders
					this.num = data.data.personals
					this.money = data.data.money

				}
			},
			tixian() {
				uni.navigateTo({
					url: '/pages/index/tixian'
				})
			},
			geren() {
				uni.navigateTo({
					url: '/pages/index/geren'
				})
			},
			tuiguangma() {
				uni.navigateTo({
					url: '/pages/index/tgm'
				})
			},
			gunli(tid) {
				this.tid = tid
				this.$refs.popup.open()
				console.log(this.gunlishow, "hahahh");
				// this.gunlishow = true
			},
			// queding() {
			// 	this.gunlishow = false
			// },
			async queding() {
				var that = this
				let data = await that.$u.api.set_portion({
					portion: that.value,
					tid: that.tid

				});
				console.log(data, 'data))))))');
				if (data) {
					console.log(data, 'data');
				}
				setTimeout(() => {
					// that.gunlishow = false
					this.$refs.popup.close()
					that.init()
				}, 100);
				// this.SET_MEMBER(data.data);
			},
			// quxiao() {
			// 	this.gunlishow = false
			// }
		}

	}
</script>

<style lang="scss">
	.zaixian {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		display: flex;
		align-items: center;
		// width: 100rpx;
		height: 40rpx;
		background: #0000004d;
		border-radius: 60rpx 0 0 60rpx;
		font-size:16rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #fff;
		padding: 0 10rpx;
		// color: #15FA47;
		z-index: 2;
	}
	.w100 {
		border-radius: 50%;
		
	}
	.box3_l{
		position: relative;
	}

	.index_t {
		margin: 22rpx 30rpx;
	}

	.index_b {
		padding: 30rpx;
		background: #F6F8FA;
	}

	.tx {
		border-radius: 50%;
	}

	.index_t_t {
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.pop {
		width: 640rpx;
		height: 416rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		padding: 30rpx;
		text-align: center;
	}

	.pop_t {
		width: 100%;
		text-align: right;
	}

	.xiugai {
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: bold;
		color: #353535;
		line-height: 40rpx;
		margin-bottom: 10rpx;

	}

	.shuru {
		margin: 20rpx;
		border-bottom: 2rpx solid #F3F3F3;
	}

	.queding {
		margin: 60rpx auto;
		width: 470rpx;
		height: 84rpx;
		background: linear-gradient(90deg, #C74BF0 0%, #8438FC 100%);
		border-radius: 82rpx 82rpx 82rpx 82rpx;

		font-size: 32rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 84rpx;

	}

	.index_t_t_m {
		margin-left: 16rpx;
		width: 250rpx;
		height: 48rpx;
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 40rpx;

	}

	.bg1 {
		height: 190rpx;
		background-image: url("../../static/index/bg1.png");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;

	}

	.bg1_t {
		padding-top: 44rpx;
		padding-bottom: 10rpx;
		font-size: 48rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 58rpx;

	}

	.bg1_b {

		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 30rpx;

	}

	.in_box1 {
		// width: 690rpx;
		// height: 192rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		margin-bottom: 20rpx;
	}

	.box_t {
		padding: 20rpx 0rpx;
		margin: 0 30rpx;
		border-bottom: 2rpx solid #F3F3F3;

		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 38rpx;

	}

	.box_b1 {

		padding: 30rpx;
		justify-content: space-between;
	}

	.box5 {
		text-align: center;
		justify-content: space-between;
	}

	.box {
		text-align: center;
	}

	.box1 {
		line-height: 48rpx;
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #8438FC;
		line-height: 40rpx;
		margin-bottom: 10rpx;

	}

	.box2 {

		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 30rpx;

	}

	.box_t {
		justify-content: space-between;
	}

	.money {
		margin-left: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
	}

	.money_num {
		color: #8438FC;
	}

	.box_t_b {
		width: 94rpx;
		height: 44rpx;
		text-align: center;
		background: linear-gradient(180deg, #C74BF0 0%, #8438FC 100%);
		border-radius: 84rpx 84rpx 84rpx 84rpx;

		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 44rpx;

	}

	.box3_r {
		margin-left: 20rpx;
		text-align: left;
	}

	.box3_r_t {

		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;

	}

	.box3_r_b {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 28rpx;
	}

	.ratio {

		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #8438FC;
		line-height: 28rpx;
	}

	.box4 {
		width: 114rpx;
		height: 56rpx;
		background: linear-gradient(180deg, #C74BF0 0%, #8438FC 100%);
		border-radius: 84rpx 84rpx 84rpx 84rpx;

		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 56rpx;

	}
	.ewm{
		width: 250rpx;
		justify-content: space-between;
		    font-size:30rpx;
		    font-family: PingFang SC-Bold, PingFang SC;
		    font-weight: bold;
		    color: #8438FC;
	}
</style>